<template>
  <div class="main">
    <el-upload
      ref="upload"
      drag
      action="/"
      :limit="1"
      :autoUpload="false"
      v-model:file-list="activeData.fileList"
      listType="text"
      :onChange="onchange"
      :on-exceed="handleExceed"
      :show-file-list="false"
    >
      <template #trigger>
        <div class="el-upload__text" v-if="activeData.fileList.length === 0">
          <em>点击上传</em>
          <span style="margin: 0 10px">/</span>
          拖拽到此区域
        </div>
        <div class="uploadAfter" v-else>
          <div @click.stop="test">
            <div class="title">
              <el-tooltip :content="activeData.fileList[0].name" placement="top-start">
                <div class="title_info1">{{ activeData.fileList[0].name }}</div>
              </el-tooltip>
              <el-icon color="#3DD598"><CircleCheckFilled /></el-icon>
            </div>
            <!-- <div class="fileUpload">
              <div class="title_info2">文件大小: {{ $fn.$getSize(activeData.fileList[0].size) }}</div>
              <div class="title_info3">上传日期：{{ $fn.$timeFormat(activeData.fileList[0].uid, 'YYYY/MM/DD HH:mm:ss') }}</div>
            </div> -->
          </div>
          <div class="btn">
            <div class="reUpload" @click="reload">重新上传</div>
            <div class="del" @click.stop="delFile(activeData.fileList[0])">删除</div>
          </div>
        </div>
      </template>
    </el-upload>
  </div>
</template>

<script setup>
const upload = ref(null);
const $fn = window.$fn;

const props = defineProps({
  fileLists: {
    type: Array,
  },
});
const { fileLists } = toRefs(props);
const activeData = reactive({
  fileList: props.fileLists || [],
});
watch(
  fileLists,
  () => {
    activeData.fileList = props.fileLists;
  },
  {
    deep: true,
  },
);
// onMounted(() => {
//   activeData.fileList = props.fileLists;
// });

const emit = defineEmits(['onUpload', 'delFile']);

const onchange = (uploadFiles) => {
  emit('onUpload', uploadFiles);
};
// 重新上传方法
const reload = () => {};

// 文件替换
const handleExceed = (files) => {
  upload.value.clearFiles();
  upload.value.handleStart(files[0] || '');
};

const delFile = (file) => {
  activeData.fileList = [];
  emit('delFile');
};
</script>
<style lang="less" scoped>
.main {
  min-width: 300px;
  width: 50%;
  margin-left: 10px;
  .title {
    margin: 10px 0;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    .title_info1 {
      width: fit-content;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 5px;
      font-weight: 550;
      text-align: left;
      color: #000;
    }
  }
  .btn {
    display: flex;
    margin-top: 20px;
    .reUpload {
      height: 30px;
      line-height: 20px;
      color: #409eff;
      margin-right: 10px;
      font-weight: bold;
      cursor: pointer;
      margin-right: 30px;
    }
    .del {
      color: #409eff;
      font-weight: bold;
      cursor: pointer;
      text-align: left;
      flex: 1;
    }
  }
  .fileUpload {
    margin-top: 10px;
    // display: flex;
    // flex-wrap: wrap;
    .title_info2 {
      text-align: left;
      color: rgba(0, 0, 0, 0.5);
    }
    .title_info3 {
      text-align: left;
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .el-upload__text {
    line-height: 60px;
  }
  .uploadAfter {
    // width: 300px;
    cursor: auto;
  }
  :deep(.el-upload-dragger) {
    padding: 0 0 0 8px;
  }
}
</style>
